
@import "common-animation.css";

/* 响应式相关 */
@sm: 40rem;
@md: 48rem;
@lg: 64rem;
@xl: 80rem;
@2xl: 96rem;


:root {
    --global-content-min-width: 20rem;
    --global-content-min-height: 30rem;

    /* color */
    --color-theme: rgba(255, 255, 255, 0.95);
    --color-theme-translucent: rgba(254, 254, 254, 0.5);

    --color-primary: #434343;
    --color-blue: #3273dc;
    --color-foreground: #434343;
    --color-background: var(--color-theme);

    --color-text-primary: var(--color-primary);
    --color-text-gray: #909399;
    --color-text-grey: var(--color-text-gray);
    --color-text-lighting: #ab3b3a;
    --color-text-shadow: #828282;
    --color-border: var(--color-primary);
    --color-border-primary: var(--color-border);
    --color-border-gray: rgba(128, 128, 128, 0.3);

    --color-button-background: var(--color-background);
    --color-button-background-hover: #cccccc80;
    --color-button-hover-background: var(--color-button-background-hover);

    /* font size */
    --font-size-larger: larger;
    --font-size-smaller: smaller;
    --font-size-small-xx: xx-small;
    --font-size-xx-small: xx-small;
    --font-size-small-x: x-small;
    --font-size-x-small: x-small;
    --font-size-small: small;
    --font-size-medium: medium;
    --font-size-large: large;
    --font-size-large-x: x-large;
    --font-size-x-large: x-large;
    --font-size-large-xx: xx-large;
    --font-size-xx-large: xx-large;

    /* font size */
    --font-larger: larger;
    --font-smaller: smaller;
    --font-small-xx: xx-small;
    --font-xx-small: xx-small;
    --font-small-x: x-small;
    --font-x-small: x-small;
    --font-small: small;
    --font-medium: medium;
    --font-large: large;
    --font-large-x: x-large;
    --font-x-large: x-large;
    --font-large-xx: xx-large;
    --font-xx-large: xx-large;

    --text-underline-offset: 0.3rem;
}



* {
    /* 禁止拖拽 */
    -webkit-user-drag: none;
    /* 平滑滚动 */
    scroll-behavior: smooth;

    /* something */
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    border-color: var(--color-border);

    /* 文本设置 */
    font-smooth: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    // font-family: "楷体", "宋体", 'Noto Serif SC', serif;
    text-shadow: 0 0 1px var(--color-text-shadow);
    text-overflow: ellipsis;
    text-underline-offset: var(--text-underline-offset);
    overflow-wrap: break-word;

    /* 动画 */
    transition: all 0.2s ease-in-out;

    /* 移动端 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.hide {
    display: none;
}


/* 颜色 */
.bg-theme,
.background-theme,
.background-color-theme {
    background-color: var(--color-theme);
}
.bg-primary,
.background-primary,
.background-color-primary {
    background-color: var(--color-primary);
}
.bg-foreground,
.background-foreground,
.background-color-foreground {
    background-color: var(--color-foreground);
}
.bg-background,
.background-background,
.background-color-background {
    background-color: var(--color-background);
}
.bg-primary-text,
.bg-text-primary,
.background-primary-text,
.background-text-primary,
.background-color-primary-text,
.background-color-text-primary {
    background-color: var(--color-text-primary);
}
.bg-lighting-text,
.bg-text-lighting,
.background-lighting-text,
.background-text-lighting,
.background-color-lighting-text,
.background-color-text-lighting {
    background-color: var(--color-text-lighting);
}
.bg-shadow-text,
.bg-text-shadow,
.background-shadow-text,
.background-text-shadow,
.background-color-shadow-text,
.background-color-text-shadow {
    background-color: var(--color-text-shadow);
}
.bg-hover-button,
.bg-button-hover,
.background-hover-button,
.background-color-hover-button,
.background-button-hover,
.background-color-button-hover {
    background-color: var(--color-button-hover-background);
}
.color-theme {
    color: var(--color-theme);
}
.color-primary {
    color: var(--color-primary);
}
.color-foreground {
    color: var(--color-foreground);
}
.color-background {
    color: var(--color-background);
}
.color-primary-text,
.color-text-primary {
    color: var(--color-text-primary);
}
.color-lighting-text,
.color-text-lighting {
    color: var(--color-text-lighting);
}
.color-hover-button,
.color-button-hover {
    color: var(--color-button-background-hover);
}
#colors() {
    theme: var(--color-theme);
    primary: var(--color-primary);
    foreground: var(--color-foreground);
    background: var(--color-background);
    primary-text: var(--color-text-primary);
    text-primary: var(--color-text-primary);
    lighting-text: var(--color-text-lighting);
    text-lighting: var(--color-text-lighting);

    .bg-theme,
    .background-theme,
    .background-color-theme {
        .bg-theme();
    }
    .bg-primary,
    .background-primary,
    .background-color-primary {
        .bg-primary();
    }
    .bg-foreground,
    .background-foreground,
    .background-color-foreground {
        .bg-foreground();
    }
    .bg-background,
    .background-background,
    .background-color-background {
        .bg-background();
    }
    .bg-primary-text,
    .bg-text-primary,
    .background-primary-text,
    .background-text-primary,
    .background-color-primary-text,
    .background-color-text-primary {
        .bg-primary-text();
    }
    .bg-lighting-text,
    .bg-text-lighting,
    .background-lighting-text,
    .background-text-lighting,
    .background-color-lighting-text,
    .background-color-text-lighting {
        .bg-lighting-text();
    }
    .bg-shadow-text,
    .bg-text-shadow,
    .background-shadow-text,
    .background-text-shadow,
    .background-color-shadow-text,
    .background-color-text-shadow {
        .bg-shadow-text();
    }
    .bg-hover-button,
    .bg-button-hover,
    .background-hover-button,
    .background-color-hover-button,
    .background-button-hover,
    .background-color-button-hover {
        .bg-hover-button();
    }
    .theme {
        .color-theme();
    }
    .primary {
        .color-primary();
    }
    .foreground {
        .color-foreground();
    }
    .background {
        .color-background();
    }
    .primary-text,
    .text-primary {
        .color-primary-text();
    }
    .lighting-text,
    .text-lighting {
        .color-lighting-text();
    }
    .hover-button,
    .button-hover {
        .color-hover-button();
    }
}


/* 字体大小 基于父元素 */
.font-smaller,
.font-size-smaller {
    font-size: var(--font-size-smaller);
}
.font-larger,
.font-size-larger {
    font-size: var(--font-size-larger);
}
/* 字体大小 固定值 */
.font-small-xx,
.font-xx-small,
.font-size-small-xx,
.font-size-xx-small {
    font-size: var(--font-size-small-xx);
}
.font-small-x,
.font-x-small,
.font-size-small-x,
.font-size-x-small {
    font-size: var(--font-size-small-x);
}
.font-small,
.font-size-small {
    font-size: var(--font-size-small);
}
.font-medium,
.font-size-medium {
    font-size: var(--font-size-medium);
}
.font-large,
.font-size-large {
    font-size: var(--font-size-large);
}
.font-large-x,
.font-x-large,
.font-size-large-x,
.font-size-x-large {
    font-size: var(--font-size-large-x);
}
.font-large-xx,
.font-xx-large,
.font-size-large-xx,
.font-size-xx-large {
    font-size: var(--font-size-large-xx);
}
#font() {
    /* 字体大小 基于父元素 */
    smaller: var(--font-size-smaller);
    larger: var(--font-size-larger);
    size-smaller: var(--font-size-smaller);
    size-larger: var(--font-size-larger);
    /* 字体大小 固定值 */
    small-xx: var(--font-size-small-xx);
    xx-small: var(--font-size-small-xx);
    small-x: var(--font-size-small-x);
    x-small: var(--font-size-small-x);
    small: var(--font-size-small);
    medium: var(--font-size-medium);
    large: var(--font-size-large);
    large-x: var(--font-size-large-x);
    x-large: var(--font-size-large-x);
    large-xx: var(--font-size-large-xx);
    xx-large: var(--font-size-large-xx);
    size-small-xx: var(--font-size-small-xx);
    size-xx-small: var(--font-size-small-xx);
    size-small-x: var(--font-size-small-x);
    size-x-small: var(--font-size-small-x);
    size-small: var(--font-size-small);
    size-medium: var(--font-size-medium);
    size-large: var(--font-size-large);
    size-large-x: var(--font-size-large-x);
    size-x-large: var(--font-size-large-x);
    size-large-xx: var(--font-size-large-xx);
    size-xx-large: var(--font-size-large-xx);


    /* 字体大小 基于父元素 */
    .smaller,
    .size-smaller {
        .font-size-smaller();
    }
    .larger,
    .size-larger {
        .font-size-larger();
    }
    /* 字体大小 固定值 */
    .small-xx,
    .xx-small,
    .size-small-xx,
    .size-xx-small {
        .font-size-small-xx();
    }
    .small-x,
    .x-small,
    .size-small-x,
    .size-x-small {
        .font-size-small-x();
    }
    .small,
    .size-small {
        .font-size-small();
    }
    .medium,
    .size-medium {
        .font-size-medium();
    }
    .large,
    .size-large {
        .font-size-large();
    }
    .large-x,
    .x-large,
    .size-large-x,
    .size-x-large {
        .font-size-large-x();
    }
    .large-xx,
    .xx-large,
    .size-large-xx,
    .size-xx-large {
        .font-size-large-xx();
    }
}


/* 文本 align */
.text-left,
.text-align-left {
    text-align: left;
}

.text-center,
.text-align-center {
    text-align: center;
}

.text-right,
.text-align-right {
    text-align: right;
}


/* 水平居中 */
.center-horizontal {
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* 居中 基于父元素 */
.center-parent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
}

/* 居中 基于页面 */
.center-screen,
.center-window,
.center-page {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



/* spacer 间隔 间距 */
.spacer,
.block-spacer {
    clear: both;
    height: 1rem;
    margin-top: 2vh;
}


.gap-10px {
    gap: 10px;
}
.gap-20px {
    gap: 20px;
}
.gap-30px {
    gap: 30px;
}


.margin-top-20px {
    margin-top: 20px;
}
.margin-top-1em {
    margin-top: 1em;
}

.margin-bottom-20px {
    margin-bottom: 20px;
}
.margin-bottom-1em {
    margin-bottom: 1em;
}

.margin-auto {
    margin: auto;
}



/* flex and grid */
.align-items-center {
    align-items: center;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-between {
    justify-content: space-between;
}


/* flex */
.flex {
    display: flex;
}
.flex-row {
    .flex();
    flex-direction: row;
}
.flex-column {
    .flex();
    flex-direction: column;
}
.flex-1 {
    .flex();
    flex: 1;
}
.flex-wrap {
    .flex();
    flex-wrap: wrap;
}
.flex-nowrap {
    .flex();
    flex-wrap: nowrap;
}
.flex-items-center {
    .flex();
    .align-items-center();
}
.flex-content-center {
    .flex();
    .justify-content-center();
}
.flex-content-between {
    .flex();
    .justify-content-between();
}



/* grid */
.grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.grid-column2,
.grid.column2 {
    .grid();
    grid-template-columns: 1fr 1fr;
}
.grid-column3,
.grid.column3 {
    .grid();
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-column4,
.grid.column4 {
    .grid();
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-column5,
.grid.column5 {
    .grid();
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-column7,
.grid.column7 {
    .grid();
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-row1,
.grid.row1 {
    .grid();
    grid-template-rows: 1fr;
}
.grid-row2,
.grid.row2 {
    .grid();
    grid-template-rows: 1fr 1fr;
}




/* 通用 */
/* border-sizing */
.border-box {
    box-sizing: border-box;
}
.content-box {
    box-sizing: content-box;
}


.sm-display-none {
    @media (min-width: @sm) {
        display: none;
    }
}
/* 边距 */
.sm-no-margin {
    @media (min-width: @sm) {
        margin: 0 !important;
    }
}
.sm-no-padding {
    @media (min-width: @sm) {
        padding: 0 !important;
    }
}

.sm-margin-4px {
    @media (min-width: @sm) {
        margin: 0.25rem;
    }
}
.sm-margin-8px {
    @media (min-width: @sm) {
        margin: 0.5rem;
    }
}
.sm-margin-1rem {
    @media (min-width: @sm) {
        margin: 1rem;
    }
}
.sm-margin-2rem {
    @media (min-width: @sm) {
        margin: 2rem;
    }
}
.sm-margin-4px-top {
    @media (min-width: @sm) {
        margin-top: 0.25rem;
    }
}
.sm-margin-8px-top {
    @media (min-width: @sm) {
        margin-top: 0.5rem;
    }
}
.sm-margin-1rem-top {
    @media (min-width: @sm) {
        margin-top: 1rem;
    }
}
.sm-margin-2rem-top {
    @media (min-width: @sm) {
        margin-top: 2rem;
    }
}
.sm-margin-4px-bottom {
    @media (min-width: @sm) {
        margin-bottom: 0.25rem;
    }
}
.sm-margin-8px-bottom {
    @media (min-width: @sm) {
        margin-bottom: 0.5rem;
    }
}
.sm-margin-1rem-bottom {
    @media (min-width: @sm) {
        margin-bottom: 1rem;
    }
}
.sm-margin-2rem-bottom {
    @media (min-width: @sm) {
        margin-bottom: 2rem;
    }
}
.sm-margin-4px-left {
    @media (min-width: @sm) {
        margin-left: 0.25rem;
    }
}
.sm-margin-8px-left {
    @media (min-width: @sm) {
        margin-left: 0.5rem;
    }
}
.sm-margin-1rem-left {
    @media (min-width: @sm) {
        margin-left: 1rem;
    }
}
.sm-margin-2rem-left {
    @media (min-width: @sm) {
        margin-left: 2rem;
    }
}
.sm-margin-4px-right {
    @media (min-width: @sm) {
        margin-right: 0.25rem;
    }
}
.sm-margin-8px-right {
    @media (min-width: @sm) {
        margin-right: 0.5rem;
    }
}
.sm-margin-1rem-right {
    @media (min-width: @sm) {
        margin-right: 1rem;
    }
}
.sm-margin-2rem-right {
    @media (min-width: @sm) {
        margin-right: 2rem;
    }
}


.sm-padding-4px {
    @media (min-width: @sm) {
        padding: 0.25rem;
    }
}
.sm-padding-8px {
    @media (min-width: @sm) {
        padding: 0.5rem;
    }
}
.sm-padding-1rem {
    @media (min-width: @sm) {
        padding: 1rem;
    }
}
.sm-padding-2rem {
    @media (min-width: @sm) {
        padding: 2rem;
    }
}
.sm-padding-4px-top {
    @media (min-width: @sm) {
        padding-top: 0.25rem;
    }
}
.sm-padding-8px-top {
    @media (min-width: @sm) {
        padding-top: 0.5rem;
    }
}
.sm-padding-1rem-top {
    @media (min-width: @sm) {
        padding-top: 1rem;
    }
}
.sm-padding-2rem-top {
    @media (min-width: @sm) {
        padding-top: 2rem;
    }
}
.sm-padding-4px-bottom {
    @media (min-width: @sm) {
        padding-bottom: 0.25rem;
    }
}
.sm-padding-8px-bottom {
    @media (min-width: @sm) {
        padding-bottom: 0.5rem;
    }
}
.sm-padding-1rem-bottom {
    @media (min-width: @sm) {
        padding-bottom: 1rem;
    }
}
.sm-padding-2rem-bottom {
    @media (min-width: @sm) {
        padding-bottom: 2rem;
    }
}
.sm-padding-4px-left {
    @media (min-width: @sm) {
        padding-left: 0.25rem;
    }
}
.sm-padding-8px-left {
    @media (min-width: @sm) {
        padding-left: 0.5rem;
    }
}
.sm-padding-1rem-left {
    @media (min-width: @sm) {
        padding-left: 1rem;
    }
}
.sm-padding-2rem-left {
    @media (min-width: @sm) {
        padding-left: 2rem;
    }
}
.sm-padding-4px-right {
    @media (min-width: @sm) {
        padding-right: 0.25rem;
    }
}
.sm-padding-8px-right {
    @media (min-width: @sm) {
        padding-right: 0.5rem;
    }
}
.sm-padding-1rem-right {
    @media (min-width: @sm) {
        padding-right: 1rem;
    }
}
.sm-padding-2rem-right {
    @media (min-width: @sm) {
        padding-right: 2rem;
    }
}




/* something */
.box {
    .border-box();
    padding: 0.25rem;
}

/* rounded */
.rounded {
    border-radius: 0.25rem;
}

/* border */
.border {
    border: 1px solid var(--color-border);
    .rounded();
}

/* 些许效果 */
/* 玻璃 */
.effect-glass {
    --value-opacity: 0.8;
    --value-blur: 0.25rem;
    background-color: rgba(255, 255, 255, var(--value-opacity));
    -webkit-backdrop-filter: blur(var(--value-blur));
    backdrop-filter: blur(var(--value-blur));
}
/* 阴影 */
.effect-shadow-box {
    box-shadow: 0 4px 10px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.1);
}
#effect() {
    .glass {
        .effect-glass();
    }
    .shadow-box {
        .effect-shadow-box();
    }
}


/* component */
.tag:not(body) {
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #4a4a4a;
    display: inline-flex;
    font-size: .75rem;
    height: 2em;
    justify-content: center;
    line-height: 1.5;
    padding-left: .75em;
    padding-right: .75em;
    white-space: nowrap;
}
.tag:not(body).is-primary {
    background-color: var(--color-blue);
    color: white;
}



/* 为所有没有子元素的标签添加 placeholder 功能 */
[placeholder]:empty::before {
    content: attr(placeholder);
}


/* 滚动条样式 */
::-webkit-scrollbar {
    width: 0.25em;
    height: 0.25em;
}
/* 轨道 */
::-webkit-scrollbar-track  {
    background-color: var(--color-theme);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 0.05em;
}
::-webkit-scrollbar-thumb:hover {
    cursor: default;
}


html,
body {
    overflow-x: hidden;
    @media (min-width: @md) {
        overflow: auto;
    }
}



body {
    #colors.background-color-theme();
}




main {
    flex: 1;
}




h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
i,
em {
    font-family: "宋体", 'Noto Serif SC', serif;
}
b,
strong {
    font-size: calc(0.9em);
}



.copyright {
    .text-align-center();
    word-break: keep-all;
    overflow-wrap: normal;
    font-family: normal Arial, Helvetica, Sans-Serif;
    font-size: medium;
    text-indent: 0;
    transition: all 0.3s;
}



::selection {
    color: white;
    text-shadow: 0px 0px 1px var(--color-theme);
    background-color: var(--color-text-lighting);
}



hr {
    color: #dedede;
    transition: all 0.1s;
    position: relative;
    width: 95%;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
}



img {
    .margin-auto();
    -webkit-user-drag: none;
    user-select: none;
    object-fit: contain;
}





p {
    #font.size-medium();
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-break: anywhere;
}


a {
    #colors.primary();
    #font.size-medium();
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
a:hover,
a > *:hover {
    #colors.text-lighting();
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 0.3rem;
}


/* button */
button,
input[type=button],
input[type=submit],
.button {
    .rounded();
    user-select: none;
    text-decoration: none;
    cursor: pointer;

    /* text center */
    .text-align-center();
    /* flex */
    .flex-row();
    .flex-wrap();
    .align-items-center();
    .justify-content-center();

    .border-box();
    border-width: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
.button:hover {
    --value-contrast: 75%;
    #colors.primary();
    /* #colors.background-color-button-hover(); */
    -webkit-backdrop-filter: contrast(var(--value-contrast));
    backdrop-filter: contrast(var(--value-contrast));
    text-decoration: none;
}
button:active,
input[type=button]:active,
.button:active {
    transition: 0.1s ease-in;
    transform: scale(0.95);
}
button:focus,
input[type=button]:focus,
.button:focus {
    border: 1px;
}


input {
    // box-sizing: border-box;
    .border-box();
    .border();
    padding: 2px;
}
input[type=url]:valid + span::after,
input[type=url]:valid + .tip::after {
    content: "√";
    color: #42d392;
}
input[type=url]:invalid + span::after,
input[type=url]:invalid + .tip::after {
    content: "×";
    color: red;
}


ol,
ul {
    list-style: none;
    .border-box();
    padding: 0;
}

li {
    .border-box();
    padding: 5px;
}






